<template>
	<view>
		<view class="header">
			<view class="header-input-container">
				<input type="text" placeholder="请输入关键字" placeholder-style="color:#999999;font-size:28rpx;text-align:center" @tap="gosearch()" disabled="true" />
				<!-- <image src="../../../images/goods/search.png"></image> -->
			</view>
		</view>
		<view style="height: 85rpx;"></view>
		<view class="banner">
			<swiper indicator-dots="true" indicator-active-color="#7ADBA8" indicator-color="rgba(255,255,255,0.4)" autoplay="ture" interval="2000" duration="500" circular="true">
				<swiper-item v-for="(item, index) in banner" :key="index"><image :src="item.filepath" class="slide-image"></image></swiper-item>
			</swiper>
			<!-- <image class="shade" src='/images/index/shade.png'></image> -->
		</view>	
		<view class="index_title" v-if="killspu.length!=0">
			<view class="circle"></view>
			嗨啤抢购
			<text class="lookmore" @tap="golist()">查看更多</text>
		</view>
		<view style="box-sizing: border-box;overflow: hidden;">
			<scroll-view class="limit-container" scroll-x="true" v-if="killspu.length!=0">
				<view class="limt-view">
					<view class="limt-item" v-for="(item, index) in killspu" :key="index" @tap="goinfo" :data-id="item.id" >
						<view>
							<view class="limt-icon "><image :src="item.filepath"></image></view>
							<view class="limt-info">
								<view class="limt-title">{{ item.name }}</view>
								<view class="progress-box">
									<progress :percent="item.percent" show-info stroke-width="6" border-radius="4" font-size="10" backgroundColor="#ebfaf3" activeColor="#7ADBA8" />
								</view>
								<view class="limt-price">
									<view class="limt-price-view">
										<view>
											<text>￥</text>
											<text>{{ item.price_spike }}</text>
										</view>
										<view>
											<text>￥</text>
											<text style="text-decoration: line-through;">{{ item.price }}</text>
										</view>
									</view>
								</view>
								<button class="lijigoumai" >立即购买</button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="index_title" v-if="role == 's'">
			<view class="circle"></view>
			商家专区
			<text class="lookmore" @tap = "gozhuanqu()">查看更多</text>
		</view>
		<view class="index_title" v-if="role == 'p'">
			<view class="circle"></view>
			嗨啤商城
			<text class="lookmore" @tap = "gotuijianlist()">查看更多</text>
		</view>
		<view class="goodlist" v-if="role=='p'" >
			<view class="good-item" @tap="goinfo" v-for="(item,index) in tuijianlist" :key="index" :data-id="item.id">
				<view class="good-img"><image :src="item.filepath"></image></view>
				<view class="goods-title">
					{{item.name}}
				</view>
				<view style="color: #999999;padding: 0rpx 20rpx;margin-bottom: 10rpx;margin-top: -15rpx;">
					<text style="font-size: 18rpx;">￥</text>
					<text style="font-size: 24rpx;text-decoration: line-through;">{{item.price}}</text>
				</view>
				<view class="goods-price">
					<text style="font-size: 20rpx;">￥</text>
					{{item.user_price}}
				</view>
				<image :src="item.iscar==1?'../../static/images/jiarugouwuche.png':'../../static/images/jiarugouwucheno.png'" class="addgouwu" @tap.stop="addcar" :data-index="index" :data-id="item.id"></image>
				<!-- <image  v-if="item.car_img=='no'" src="../../static/images/jiarugouwucheno.png" class="addgouwu" @tap.stop="addcar" :data-index="index" :data-id="item.id"></image> -->
				<image v-if="item.collect==1" src="../../static/images/shoucang-active.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
				<image v-if="item.collect==0" src="../../static/images/shoucang.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
			</view>
		</view>
		<view class="goodlist" v-if="role=='s'">
			<view class="good-item" @tap="goinfo" v-for="(item,index) in shangjialist" :key="index" :data-id="item.id">
				<view class="good-img"><image :src="item.filepath"></image></view>
				<view class="goods-title">
					{{item.name}}
				</view>
				<view style="color: #999999;padding: 0rpx 20rpx;margin-bottom: 10rpx;margin-top: -15rpx;">
					<text style="font-size: 18rpx;">零售￥</text>
					<text style="font-size: 24rpx;text-decoration: line-through;">{{item.user_price}}</text>
				</view>
				<view class="goods-price">
					<text style="font-size: 20rpx;">￥</text>
					{{item.merchant_price}}
				</view>
				<image :src="item.iscar==1?'../../static/images/jiarugouwuche.png':'../../static/images/jiarugouwucheno.png'" class="addgouwu" @tap.stop="addcar" :data-index="index" :data-id="item.id"></image>
				<image v-if="item.collect==1" src="../../static/images/shoucang-active.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
				<image v-if="item.collect==0" src="../../static/images/shoucang.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
			</view>
		</view>
			
	</view>
</template>

<script>
import { isshangjia } from '@/static/js/login.js';
import { getlogin } from '@/static/js/login.js';
import httpPath from '@/static/js/path.js';
var page = 1;
import MescrollUni from '@/components/uni-load-more.vue';
export default {
	data() {
		return {
			banner: [
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3687173686,831911132&fm=26&gp=0.jpg',
				'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2601388974,2460884874&fm=26&gp=0.jpg',
				'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2294966447,248611631&fm=26&gp=0.jpg'
			],
			role: '', //角色
			wxinfo_id: 0,
			killspu: [],
			shangjialist: [],
			tuijianlist: []
		};
	},

	components: {
		MescrollUni
	},
    onShow() {
    	let ss = uni.getStorageSync('user');
    	if (ss) {
    		this.wxinfo_id = ss.wxinfo_id;
    	} else {
    		this.wxinfo_id = 0;
    	}
    	this.loadingType = 0;
		this.loadingType = 0;
		page = 1;
		this.role = isshangjia();
		this.getbanner_limit();
		this.gettuijian();
    },
	onLoad(e) {
		if(e.scene){
			let scened = decodeURIComponent(e.scene);
			console.log(scened);
			uni.setStorage({
			    key: 'sole',
			    data:scened,
			    success: function () {
			    }
			});
			//&是我们定义的参数链接方式
			// this.invite_id = scened.split("&")[0];
			// this.storeId = scened.split('&')[1];
		}
		let ss = uni.getStorageSync('user');
		if (ss) {
			this.wxinfo_id = ss.wxinfo_id;
		} else {
			this.wxinfo_id = 0;
		}
		this.loadingType = 0;
		page = 1;
		this.role = isshangjia();
		this.getbanner_limit();
		this.gettuijian();
	},
	onReachBottom: function() {
	
		if (this.loadingType != 0) {//loadingType!=0;直接返回
			return false;
		}
		this.loadingType = 1;
		uni.showNavigationBarLoading();//显示加载动画
		page++;//每触底一次 page +1
		let url = '';
		if (this.role == 's') {
			url = '/index/shopmall/merchant';
		} else if (this.role == 'p') {
			url = '/index/product/index';
		}
		uni.request({
			url: httpPath.filePath+url,
			method:'POST',
			header:{'content-type':'application/x-www-form-urlencoded'},
			data:  { wxinfo_id: this.wxinfo_id, page: page },
			success: (res) => {
				if (res.data.data.length==0) {//没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading();//关闭加载动画
					return false;
				}
				if(this.role == 's'){
					for (let i = 0;i < res.data.data.length;i++) {
						
						this.shangjialist.push(res.data.data[i]);
						
					}
				}else{
					for (let i = 0;i < res.data.data.length;i++) {
						
						this.tuijianlist.push(res.data.data[i]);
						
					}
				}
				
				this.loadingType = 0;//将loadingType归0重置
				uni.hideNavigationBarLoading();//关闭加载动画
				
			}
		});
	
	},
	methods: {
		// 加入购物车
		addcar(e){
			let id = e.currentTarget.dataset.id;
			let index = e.currentTarget.dataset.index;
			let userinfo= getlogin();
			if(userinfo){
				uni.request({
					url: httpPath.filePath+"/index/shopping/publish",
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {spu_id:id,count:1,wxinfo_id:this.wxinfo_id},
					success: (res) => {
						if(res.data.code==200){
							if(this.role=="s"){
								this.shangjialist[index].iscar=1;
							}else{
								this.tuijianlist[index].iscar=1;
							}
						}
					}
				});
			}
		},
		gotuijianlist(){
			uni.navigateTo({
				url: '../shopping/goodslist'
			});
		},
		/**
		 * 收藏商品
		 */
		shoucang(e){
			let id = e.currentTarget.dataset.id;
			let index = e.currentTarget.dataset.index;
			// let type = e.currentTarget.dataset.type;
			let userinfo= getlogin();
		
			if(userinfo){
				uni.request({
					url: httpPath.filePath+'/index/spucollect/publish',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {wxinfo_id:this.wxinfo_id,id:id},
					success: (res) => {
						if(res.data.code==200){
							if(this.role=='p'){
								this.tuijianlist[index].collect=1;
							}else if(this.role=='s'){
								this.shangjialist[index].collect=1;
							}
							
						}else if(res.data.code==201){
							if(this.role=='p'){
								this.tuijianlist[index].collect=0;
							}else if(this.role=='s'){
								this.shangjialist[index].collect=0;
							}
						}  
					}
				});
			}
		},
		gosearch(){
			uni.navigateTo({
				url:"saerch"
			})
		},
		gozhuanqu(){
			uni.navigateTo({
				url:"zhuanqulist"
			})
		},
		/**
		 * 获取banner图与秒杀商品
		 */
		getbanner_limit() {
			uni.request({
				url: httpPath.filePath + '/index/shopmall/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { wxinfo_id: this.wxinfo_id },
				success: res => {
					if (res.data.code == 200) {
						this.banner = res.data.data.banner;
						this.killspu = res.data.data.killspu;
						if(this.killspu.length!=0){
							for(let i=0 ;i<this.killspu.length;i++){
								this.killspu[i].percent=(this.killspu[i].residue/this.killspu[i].kill_num)*100;
								this.killspu[i].percent=this.killspu[i].percent.toFixed(2);
							}
						}
					}
				}
			});
		},
		gettuijian() {
			
			let url = '';
			if (this.role == 's') {
				url = '/index/shopmall/merchant';
			} else if (this.role == 'p') {
				url = '/index/product/index';
			}
			
			uni.request({
				url: httpPath.filePath + url,
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: { wxinfo_id: this.wxinfo_id, page: page },
				success: res => {
					if (res.data.code == 200) {
						if (this.role == 's') {
							this.shangjialist = res.data.data;
							// for(let i=0;i<this.shangjialist.length;i++){
							// 	this.shangjialist[i].car_img="no"
							// }
						} else if (this.role == 'p') {
							this.tuijianlist = res.data.data;
							// for(let i=0;i<this.tuijianlist.length;i++){
							// 	this.tuijianlist[i].car_img="no"
							// }
						}
					}
				}
			});
		},
		goinfo(e) {
			uni.navigateTo({
				url: 'goodsinfo?id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 前往限时抢购列表
		 */
		golist() {
			uni.navigateTo({
				url: 'limitlist'
			});
		}
	}
};
</script>

<style>
page {
	width: 100%;
	box-sizing: border-box;
	background: #f9f9f9;
}

.lookmore {
	position: absolute;
	top: 18rpx;
	right: 30rpx;
	height: 38rpx;
	font-size: 18rpx;
	color: #333333;
	border: 1px solid #333333;
	border-radius: 19rpx;
	padding: 0px 10rpx;
	line-height: 38rpx;
}
.only-line {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.header {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 85rpx;
	background: #333;
	width: 100%;
	padding-top: 16rpx;
	z-index: 100;
}
.header-input-container {
	width: 686rpx;
	margin: auto;
	height: 57rpx;
	border-radius: 30rpx;
	position: relative;
	background: #fff;
}
.header-input-container input {
	width: 100%;
	height: 100%;
	padding-left: 20rpx;
	background: #fff;
	border: none;
	border-radius: 30rpx;
}
.header-input-container image {
	width: 29rpx;
	height: 36rpx;
	position: absolute;
	top: 10rpx;
	right: 20rpx;
}
.banner {
	margin-top: 31rpx;
}
.banner swiper {
	width: 686rpx;
	margin: auto;
	border-radius: 5px;
	overflow: hidden;
	height: 445rpx;
}
.banner image {
	width: 100%;
	border-radius: 5px;
}
.icon-container {
	overflow: hidden;
	padding: 31rpx;
}
.icon-item {
	width: 25%;
	float: left;
	text-align: center;
}
.icon-item image {
	width: 115rpx;
	height: 115rpx;
	margin: auto;
	display: block;
}
.icon-item text {
	display: block;
	font-size: 28rpx;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	line-height: 50rpx;
}
.index_title {
	position: relative;
	box-sizing: border-box;
	margin: 20rpx 0px;
	z-index: 1;
	position: relative;
	width: 100%;
	padding-left: 57rpx;
	height: 84rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(41, 41, 41, 1);
	line-height: 84rpx;
}
.index_title .circle {
	position: absolute;
	top: 15rpx;
	left: 32rpx;
	width: 52rpx;
	height: 52rpx;
	background: #73cf7e;
	border-radius: 50%;
	z-index: -10;
	opacity: 0.3;
}
.progress-box {
	margin: 5rpx 0px;
}
.limit-container {
	width: 100%;
	white-space: nowrap;
	padding-right: 25upx;
	padding0-left: 25upx;
	border-radius: 6upx;
}
.limt-view {
	display: flex;
	align-items: flex-start;
}
.limt-item > view {
	display: flex;
	align-items: flex-start;
}
.limt-item {
	height: 236rpx;
	margin: 0px 15rpx;
	border-radius: 5rpx;
	background: #fff;
	width: 650rpx;
	float: left;
}
.limt-icon {
	width: 236rpx;
	height: 236rpx;
}
.limt-icon image {
	width: 236rpx;
	height: 236rpx;
	border-radius: 5px 0px 0px 5px;
}
.limt-info {
	padding: 20rpx;
	position: relative;
	border-radius: 5rpx;
	width: 400rpx;
}
.limt-title {
	height: 66rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 33rpx;
}

.limt-price-view view:nth-of-type(1) {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}
.limt-price-view view:nth-of-type(2) {
	font-size: 24rpx;
	color: #999999;
}
.lijigoumai {
	width: 143rpx;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	color: #fff;
	position: absolute;
	bottom: 15px;
	right: 20rpx;
	background: #7adba8;
	text-align: center;
	padding: 0px;
	line-height: 60rpx;
}
.goodlist {
	box-sizing: border-box;
	overflow: hidden;
}
.good-item {
	width: 375rpx;
	border-radius: 5px;
	position: relative;
	padding-bottom: 15rpx;
	float: left;
	margin-bottom: 30rpx;
}
.good-img {
	width: 375rpx;
	height: 375rpx;
	overflow: hidden;
}
.good-img image {
	width: 100%;
	height: 100%;
}
.goods-title {
	margin-bottom: 30rpx;
	padding: 0rpx 10rpx 0px 30rpx;
	height: 75rpx;
	font-size: 28rpx;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 38rpx;
}
.goods-price {
	font-size: 32rpx;
	font-weight: bold;
	padding: 0px 20rpx;
}
.shoucang {
	width: 41.2rpx;
	height: 37rpx;
	position: absolute;
	bottom: 15rpx;
	right: 15rpx;
}
.addgouwu{
	width: 50rpx!important;height: 45rpx!important;
	position: absolute;bottom: 65rpx;right: 10rpx;

}
</style>
